<template>
	<div class="login-container flx-center">
		<div class="login-box">
			<div class="login-form">
				<div class="login-logo">
					<img class="login-icon" :src="logo" alt="" />
					<h2 class="logo-text">后台管理系统</h2>
				</div>
				<div>
					<div v-if="loadingValue" style="text-align: center; margin-top: 160px">
						<a-space size="large">
							<a-spin :size="32" />
							<span style="text-align: center">单点登录跳转中</span>
						</a-space>
					</div>
					<a-result status="error" title="系统提示">
						<template #subtitle>
							{{ msg }}
						</template>
						<template #extra>
							<a-space>
								<a-button @click="router.push({ name: LOGIN_ROUTE_NAME })" type="primary" lang="">使用账号密码登陆</a-button>
							</a-space>
						</template>
					</a-result>
				</div>
			</div>
		</div>
		<a-layout-footer class="footer"> Copyright © 2023 东软教育科技集团 All Rights Reserved </a-layout-footer>
	</div>
</template>
<script setup lang="ts">
import logo from '@/assets/images/neuedu-v.04c859db5cc89b24c824a6cdb50b7a2a.svg';
import router from '@/routers';
import useLoading from '@/hooks/loading';
import { onMounted, ref } from 'vue';
import { LOGIN_ROUTE_NAME } from '@/routers/constants';

const loadingValue = ref(true);
const flag = ref(false);
const msg = ref('');

const handleSsoLogin = async () => {
	const { code, state, error } = await router.currentRoute.value.query;
	if (error) {
		loadingValue.value = false;
		msg.value = error as string;
		flag.value = true;
	}
};

onMounted(async () => {
	await handleSsoLogin();
});
</script>
<style lang="scss" scoped>
.login-container {
	height: 100%;
	background-color: #eeeeee;
}
.flx-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-box {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	width: 480px;
	height: 600px;
	padding: 0 50px;
	background-color: hsl(0deg 0% 100% / 80%);
	border-radius: 10px;
}
.login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	img {
		width: 200px;
		height: 120px;
	}
	.logo-text {
		margin-top: 30px;
		font-size: 30px;
		font-weight: bold;
		color: #34495e;
		white-space: nowrap;
	}
}
.el-form-item {
	margin-bottom: 40px;
}
.login-btn {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 40px;
	white-space: nowrap;
	.el-button {
		width: 185px;
	}
}
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	color: var(--color-text-2);
	text-align: center;
	position: absolute;
	bottom: 20px;
}
:deep(.arco-tabs-nav) {
	width: 302px;
}
</style>
